<template>
  <div>
    <searchBar placeHolder='请输入运营商名称'
               @handleSearch='init' />
    <el-table :data="tableData">
      <el-table-column align="center"
                       label="订单编号"
                       prop="odd_number">
      </el-table-column>
      <el-table-column align="center"
                       label="联系电话"
                       prop="phone">
      </el-table-column>
      <el-table-column align="center"
                       label="负责人"
                       prop="leader">
      </el-table-column>
      <el-table-column align="center"
                       label="运营商名称">
        <template slot-scope="scope">
          <el-popover placement="right"
                      width="350"
                      trigger="click">
            <el-button type="text"
                       slot="reference"
                       @click="details(scope.row.aid)">{{scope.row.company}}</el-button>
            <h3 style="text-align:center">
              提现账户信息
            </h3>
            <div v-if="detailsList"
                 class="details">

              <div>
                <span>开户名:</span>
                <span>{{detailsList.account_name}}</span>
              </div>
              <div>
                <span>开户行:</span>
                <span>{{detailsList.bank_name}}</span>
              </div>
              <div>
                <span>开户分行:</span>
                <span>{{detailsList.bank_branch}}</span>
              </div>
              <div>
                <span>提现账号:</span>
                <span>{{detailsList.account}}</span>
              </div>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       label="提现金额"
                       prop="money">
      </el-table-column>
      <el-table-column align="center"
                       label="申请时间"
                       prop="create_time">

      </el-table-column>

      <el-table-column align="center"
                       label="售卡分佣">
        <template slot-scope="scope">
          <el-button type="text"
                     @click="dialog.cardVisible=true,aid=scope.row.aid,card()">详情</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       label="推荐收入">
        <template slot-scope="scope">
          <el-button type="text"
                     @click="dialog.recommendedVisible=true,aid=scope.row.aid,recommended()">详情</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       label="提现记录">
        <template slot-scope="scope">
          <el-button type="text"
                     @click="dialog.withdrawalVisible=true,aid=scope.row.aid,withdrawal()">详情</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       label="操作">
        <template slot-scope="scope">
          <el-button type="primary"
                     size="small"
                     @click="adopt(scope.row)">通过</el-button>

          <el-popover placement="bottom"
                      width="160"
                      v-model="rejected[scope.$index]">

            <el-button slot="reference"
                       type="warning"
                       size="small"
                       @click="rejected[scope.$index]=true">驳回</el-button>
            <el-input type="textarea"
                      :autosize="{ minRows: 4, maxRows: 6}"
                      placeholder="请输入驳回理由"
                      v-model="reason[scope.$index]">
            </el-input>
            <el-button type="primary"
                       style="margin:10px 0"
                       size="mini"
                       @click='Reject(scope.row,scope.$index)'>驳回</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <!-- 售卡分佣详情 -->
    <v-dialog :show.sync='dialog.cardVisible'
              title='售卡分佣'>
      <el-table :data="cardDetails.tableData">
        <el-table-column align="center"
                         label="售卡奖励"
                         prop="money">
        </el-table-column>
        <el-table-column align="center"
                         label="售卡时间"
                         prop="create_time">

        </el-table-column>
        <el-table-column align="center"
                         label="车辆类型">
          <template slot-scope="scope">
            {{`${scope.row.car_brand}-${scope.row.car_type}`}}
          </template>
        </el-table-column>
      </el-table>
      <v-pagination :total='cardDetails.total'
                    :page.sync='cardDetails.page'
                    @pagination='card' />
    </v-dialog>

    <!-- 推荐收入详情 -->
    <v-dialog :show.sync='dialog.recommendedVisible'
              title='推荐收入'>
      <el-table :data="recommendedDetails.tableData">
        <el-table-column align="center"
                         label="推荐人"
                         prop="share_name">
        </el-table-column>
        <el-table-column align="center"
                         label="金额"
                         prop="refund_price">
        </el-table-column>
        <el-table-column align="center"
                         label="类型"
                         prop="rec_type">
        </el-table-column>

        <el-table-column align="center"
                         label='被推荐者'
                         prop="reg_name">
        </el-table-column>
      </el-table>
      <v-pagination :total='recommendedDetails.total'
                    :page.sync='recommendedDetails.page'
                    @pagination='recommended' />
    </v-dialog>
    <!-- 提现记录详情 -->
    <v-dialog :show.sync='dialog.withdrawalVisible'
              title='提现记录'>
      <el-table :data="withdrawaldetails.tableData">

        <el-table-column align="center"
                         label="提现金额"
                         prop="money">

        </el-table-column>
        <el-table-column align="center"
                         label="申请时间"
                         prop="create_time">

        </el-table-column>
        <el-table-column align="center"
                         label="通过时间"
                         prop="audit_time">

        </el-table-column>
        <el-table-column align="center"
                         label="审核人"
                         prop="audit_person">

        </el-table-column>
      </el-table>
      <v-pagination :total='withdrawaldetails.total'
                    :page.sync='withdrawaldetails.page'
                    @pagination='withdrawal' />
    </v-dialog>
    <!-- 分页 -->
    <v-pagination :total='total'
                  :page.sync='page'
                  @pagination='init' />
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [],
      total: 0, //总页数
      page: 1,//当前页 
      detailsList: {},
      aid: '',
      dialog: {
        cardVisible: false,
        withdrawalVisible: false,
        recommendedVisible: false
      },
      cardDetails: {  //收入明细详情
        tableData: [],
        page: 1,
        total: 0
      },
      recommendedDetails: {  //收入明细详情
        tableData: [],
        page: 1,
        total: 0
      },
      withdrawaldetails: { //提现记录详情
        tableData: [],
        page: 1,
        total: 0
      },
      rejected: [],
      reason: [] //驳回理由
    }
  },
  methods: {
    async init (data) {
      try {
        const res = await this.api.operatorWaitList(Object.assign({}, data, { page: this.page, key: data && data.search }))
        this.tableData = res.data.list || []
        this.total = res.data.rows || 0
      } catch (err) {
        console.log(err)
        this.$message.error('接口报错,请联系管理员')
      }
    },
    async details (aid) { //获取提现账户信息
      try {
        const res = await this.api.getAgentAccount({ aid: aid })  //uid 车主id
        this.detailsList = res.data || {}
      } catch (err) {
        this.$message.error('接口报错,请联系管理员')
      }
    },
    async card () {  //售卡分佣详情
      try {
        const res = await this.api.incomeList({ aid: this.aid, page: this.cardDetails.page })
        this.cardDetails.tableData = res.data.list || []
        this.cardDetails.total = res.data.rows || 0
      } catch (err) {
        this.$message.error('接口报错,请联系管理员')
      }
    },
    async recommended () {  //推荐收入
      try {
        const res = await this.api.agentRecInc({ aid: this.aid, page: this.recommendedDetails.page })
        this.recommendedDetails.tableData = res.data.list || []
        this.recommendedDetails.total = res.data.rows || 0
      } catch (err) {
        this.$message.error('接口报错,请联系管理员')
      }
    },
    async withdrawal () { //提现记录
      try {
        const res = await this.api.OperatorRecord({ aid: this.aid, page: this.withdrawaldetails.page })
        this.withdrawaldetails.tableData = res.data.list || []
        this.withdrawaldetails.total = res.data.rows || 0
      } catch (err) {
        this.$message.error('接口报错,请联系管理员')
      }
    },
    async adopt (row) {  //通过
      try {
        const res = await this.api.Operatoradopt({ id: row.id, phone: row.phone, company: row.company })
        if (res.code == 1) {
          this.$message({ message: res.msg, type: 'success' })
          this.init()
        } else {
          this.$message.error(res.msg)
        }

      } catch (err) {
        this.$message.error('出错了,请联系管理员')
      }
    },
    async Reject (row, index) { //驳回
      if (!this.reason[index]) {
        this.$message.error('请输入驳回理由')
        return;
      }
      try {
        const res = await this.api.Operatorreject(   //id 申请id  phone 联系电话 unionId 车主的unionId  name 车主姓名  reason 驳回理由 money 提现金额  create_time 申请时间
          {
            id: row.id, phone: row.phone, company: row.company, reason: this.reason[index]
          }
        )
        if (res.code == 1) {
          this.$message({ message: res.msg, type: 'success' })
          this.rejected[index] = false
          this.init()
        } else {
          this.$message.error(res.msg)
        }

      } catch (err) {
        this.$message.error('出错了,请联系管理员')
      }
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped lang='scss'>
.details {
  margin-top: 20px;
  & > div {
    margin: 10px 0;
    & > span {
      display: inline-block;
      width: 50%;
    }
  }
}

.details > div > span:last-child {
  text-align: right;
}
.head_pic {
  text-align: center;
}
.head_pic img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  vertical-align: middle;
}
</style>
